<template>
  <div class="order">
    <el-button type="text" icon="el-icon-back" @click="back">返回</el-button>
    <!-- {{ o }} -->
    <ul class="order_list" style="margin-top: 1em">
      <li class="order">
        <el-row class="order_header">
          <el-col :span="6"
            >订单状态:
            <strong style="color: #30ce77; font-size: 17px">{{
              o.status
            }}</strong></el-col
          >
          <el-col :span="6"
            >下单时间: <strong>{{ o.orderTime | fmtDate }}</strong></el-col
          >
          <el-col :span="6">订单编号:{{ o.id }}</el-col>
          <el-col :span="6"
            >订单总额:￥<span style="color: red; font-size: 15px"
              >{{ o.total }} </span
            >/ 元
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-card>
              <div>会员信息</div>
              <el-col :span="24">
                <el-row class="order_lines">
                  <div class="order_line">
                    <el-col :span="6">
                      <el-col>
                        <img
                          :src="o.customer.userFace"
                          alt=""
                          style="
                            width: 50%;
                            vertical-align: top;
                            border-radius: 30px;
                            margin-left: 20%;
                          "
                        />
                      </el-col>
                    </el-col>
                    <el-col :span="18">
                      <div class="order_desc">
                        <div>
                          <strong>会员名称：</strong> {{ o.customer.realname }}
                        </div>
                        <div>
                          <strong>手机号：</strong> {{ o.customer.telephone }}
                        </div>
                      </div>
                    </el-col>
                  </div>
                </el-row>
              </el-col>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card>
              <div>收货人信息</div>
              <el-col :span="24">
                <el-row class="order_lines">
                  <div class="order_line">
                    <el-col :span="12">
                      <div class="order_desc">
                        <div>
                          <strong>收货人姓名：</strong> {{ o.address.realname }}
                        </div>
                        <div>
                          <strong>收货地址：</strong> {{ o.customer.address }}
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="order_desc">
                        <div>
                          <strong>收货人联系方式：</strong>
                          {{ o.address.telephone }}
                        </div>
                      </div>
                    </el-col>
                  </div>
                </el-row>
              </el-col>
            </el-card>
          </el-col>
        </el-row>
        <el-row>
          <el-card>
            <div>订单产品信息</div>
            <el-col :span="24">
              <el-row class="order_lines">
                <div
                  v-for="line in o.orderLines"
                  :key="line.id"
                  class="order_line"
                >
                  <el-col :span="4">
                    <img
                      :src="line.product.photo"
                      alt=""
                      style="width: 100%; vertical-align: top"
                    />
                  </el-col>
                  <el-col :span="14">
                    <div class="order_desc">
                      <div><strong>商品名称：</strong> {{ line.name }}</div>
                      <div
                        style="
                          overflow: hidden;
                          　　text-overflow: ellipsis;
                          　　display: -webkit-box;
                          　　-webkit-line-clamp: 3;
                          　　-webkit-box-orient: vertical;
                        "
                      >
                        <strong>商品介绍：</strong>
                        {{ line.product.description }}
                      </div>
                      <div
                        style="
                          width: 100%;
                          overflow: hidden;
                          white-space: nowrap;
                          text-overflow: ellipsis;
                        "
                      >
                        <strong>顾客备注：</strong> {{ o.buyerMessage }}
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <ul>
                      <li>
                        商品金额：￥<span style="color: red; font-size: 15px">{{
                          line.price
                        }}</span>
                        / {{ line.product.unit }}
                      </li>
                      <li>数量：{{ line.num }}</li>
                      <li v-if="o.status !== '待支付'">
                        实付金额：￥<span style="color: red; font-size: 15px"
                          >{{ line.price * line.num }}
                        </span>
                        / 元
                      </li>
                      <li v-else>实付金额：还未支付</li>
                      <li v-if="o.orderStatus == '待派送'">
                        快递单号：<strong>{{ o.expressCode }}</strong>
                      </li>
                    </ul>
                  </el-col>
                </div>
              </el-row>
            </el-col>
          </el-card>
        </el-row>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      o: {},
    };
  },
  computed: {},
  methods: {
    back() {
      this.$router.go(-1);
    },
  },
  created() {
    this.o = this.$route.query;
  },
};
</script>

<style scoped>
.order_desc {
  padding: 0 1em;
}
.order_desc > div {
  line-height: 2em;
}

.order_list {
  font-size: 12px;
  border: 1px solid #f5f5f5;
  margin-bottom: 0.3em;
}
.order_list .order_header {
  background-color: #f5f5f5;
  line-height: 38px;
  padding: 0 1em;
}
.order_list .order_lines {
  padding: 1em;
  border-right: 1px solid #f5f5f5;
}
.order_list .order_lines .order_line::after {
  content: "";
  display: block;
  clear: both;
}
.order_list .order_lines .order_line {
  padding: 0.5em 0;
  border-bottom: 1px solid #f5f5f5;
}
.order_list .order_lines .order_line:last-child {
  border-bottom: none;
}
.order_list .order_lines li {
  line-height: 20px;
}
.el-card {
  margin: 1em;
}
</style>
